<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>抑郁症患者属性分布图</title>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/comon0.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        .box {
            text-align: center;
        }

        .alltitle {
            font-size: 24px;
            /* 调整文字的大小 */
        }

        .box>div {
            margin-bottom: 20px;
        }

        #main {
            width: 900px;
            height: 500px;
            /* 其他样式设置 */
        }
    </style>
</head>

<body>
    <div class="head222">
        <h1 style="font-size: 38px;margin-top: 50px">全球抑郁症患者大数据分析</h1>
    </div>
    <div class="alltitle" style="margin-top: 75px;font-size: 30px">抑郁症患者属性分布图&nbsp;&nbsp;&nbsp;<a href="../index.html"
            style="font-size: 12px;"><i class="fas fa-home" style="color: white;font-size: 20px;"></i></a></div>
    <div class="container">


        <div class="sy" id="fb1"></div>
        <div class="sy" id="fb2"></div>
        <div class="sy" id="fb3"></div>
    </div>

    </div>

    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb1'));
            var xdata = [];
            $.getJSON("https://bdapi.gxist.cn/api/sex-depressed", function (values) {
                for (var i = 0; i < values["data"].length; i++) {
                    //重写JSON表单格式
                    var arr = {
                        "name": values["data"][i]["sex"] == 'male' ? '女性' : '男性',
                        "value": values["data"][i]["depressedSex"]
                    };
                    xdata.push(arr);
                }
                option = {

                    title: [{
                        text: '性别分布',
                        left: 'center',
                        herf: './pages/echarts_31.html',
                        top: '100px',
                        textStyle: {

                            color: '#fff',
                            fontSize: '25',

                        },
                        events: {
                            click: function () {
                                window.location.href = './pages/echarts_31.html'; // 设置要跳转的链接
                            }
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {

                        top: '70%',
                        itemWidth: 18,
                        itemHeight: 18,
                        data: ['女性', '男性'],
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '18',
                        }
                    },
                    series: [
                        {
                            name: '性别分布',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            color: ['#065aab', '#068eab'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: xdata
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            })
        })


    </script>

    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb2'));

            var xdata = [];

            $.getJSON("https://bdapi.gxist.cn/api/age-depressed", function (values) {
                for (var i = 0; i < values["data"].length; i++) {
                    //重写JSON表单格式
                    var arr = { "name": values["data"][i]["age"], "value": values["data"][i]["depressedNo"] };
                    xdata.push(arr);
                }
                option = {

                    title: [{
                        text: '年龄分布',
                        left: 'center',
                        top: '100px',
                        textStyle: {
                            color: '#fff',
                            fontSize: '25',

                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {

                        top: '70%',
                        itemWidth: 18,
                        itemHeight: 18,
                        data: ['5-14', '15-24', '25-34', '35-54', '55-74', '75+'],
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '18',
                        }
                    },
                    series: [
                        {
                            name: '年龄分布',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: xdata
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            })

        })

    </script>
    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb3'));
            var xdata = [];
            $.getJSON("https://bdapi.gxist.cn/api/gdp-per-section", function (values) {
                for (var i = 0; i < values["data"].length; i++) {
                    //重写JSON表单格式
                    var arr = { "name": values["data"][i]["gdpPerCapita"], "value": values["data"][i]["depressedNo"] };
                    xdata.push(arr);
                }
                option = {
                    title: [{
                        text: '人均gdp分布',
                        left: 'center',
                        top: '100px',
                        textStyle: {
                            color: '#fff',
                            fontSize: '25'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {
                        top: '70%',
                        itemWidth: 18,
                        itemHeight: 18,
                        data: ['<300', '300-500', '500-1000', '>1000'],
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '20',
                        }
                    },
                    series: [
                        {
                            name: '人均gdp分布',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            color: ['#065aab', '#066eab', '#0682ab', '#0696ab'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: xdata
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            })
        })

    </script>

</body>

</html>